<template>
<div class="page">
  <h1>1111</h1>
<div id="classic">
  <app-scroll class="content">
    <div class="classic-list">
      <ul>
        <li class="list" v-for="item in classic" :key="item.id" @click="dianji(item.id)">
          <div class="image">
            <img :src="item.img" alt="">
          </div>
          <div class="title">
            <span>{{item.title}}</span>4
            <h1>{{item.english}}</h1>
            <h2>{{item.actors}}</h2>
            <h3>{{item.showInfo}}</h3>
          </div>
          <div class="pingfen">
            <span>{{item.grade}}</span>
            <h1>分</h1>
          </div>
        </li>
      </ul>
    </div>
  </app-scroll>
  

  
</div>
<router-view></router-view>
</div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  computed:{
    ...mapState({
      classic:state=>state.classic.classic
    })
  },
  created(){
    this.$store.dispatch('classic/requestClassicList')
  },
  methods:{
    dianji(id){
      this.$router.push({name:'classic-dail',params:{id}});
    }
  }
}
</script>

<style lang="scss" scoped>
.page{
  width: 100%;
  height: calc(100% - 144px) !important;
}
#classic{
  background-color:#fff;
  width: 100%;
  height: 100%;
  position: relative;
}
.content{
  width: 100%;
  height: 100%;
}
.classic-list{
  width: 100%;
  height: 100%;
  padding: 14.5px 0 0 0;
  .list{
    width: 338px;
    height: 94px;
    font-size: 14px;
    color: #666666;
    margin: 0 0 20px 20px;
    display: flex;
    // align-items: center;
    .image{
      img{
        width: 66px;
        height: 94px;
      }
    }
    .title{
      display: flex;
      flex-direction: column;
      width: 202px;
      height: 94px;
      margin-left: 10px;
      span{
        height: 24px;
        color: #333333;
        font-size: 17px;
        margin: 0 0 4px;
      }
      h1{
        height: 18px;
        font-size: 13px;
        margin: 0 0 4px;
      }
      h2{
        height: 18px;
        font-size: 13px;
        margin: 0 0 4px;
      }
      h3{
        height: 18px;
        font-size: 13px;
        margin: 0 0 4px;
      }
    }
    .pingfen{
      width: 60px;
      height: 18px;
      display: flex;
      // justify-content: flex-start;
      // align-items: center;
      font-size: 12px;
      color: #999999;
      line-height: 18px;
      span{
        color: #faaf00;
        font-size: 15px;
      }
    }
  }
}
</style>